<template>
  <el-card class="bury-develop-container">
    <div class="search">
      <el-input placeholder="请输入内容" v-model="search.requirementName" size="mini" class="name">
        <span slot="prepend">需求名称</span>
        <el-button slot="append" icon="el-icon-search" @click="handleQueryList"></el-button>
      </el-input>
    </div>
    <el-table :data="data" size="mini" border v-loading="tableLoading">
      <el-table-column
        v-for="item in columns"
        :key="item.prop"
        :prop="item.prop"
        :label="item.label"
        :show-overflow-tooltip="true"
        :sortable="item.sortable"
        :min-width="item.width"
      >
        <template slot-scope="scope">
          <span
            v-if="item.prop === 'status'"
            :class="'status-' + scope.row.status"
          >{{$requirementStatusObj[scope.row.status] || "--"}}</span>
          <span
            v-else-if="item.prop === 'createTime' || item.prop === 'updateTime'"
          >{{scope.row[item.prop] ? $moment(scope.row[item.prop]).format("YYYY-MM-DD HH:DD:SS") : "--"}}</span>
          <span v-else>{{scope.row[item.prop] || "--"}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150" prop="action" align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.status === 2 || scope.row.status === 3 || scope.row.status === 4">
            <el-button size="mini" type="text" @click="handleDevelop(scope)">开发</el-button>
            <el-button
              size="mini"
              type="text"
              v-if="scope.row.status < 5 && $currentRole>1"
              @click="handleOnline(scope)"
            >提交上线</el-button>
            <el-button
              size="mini"
              type="text"
              v-if="scope.row.status < 5 && $currentRole>1"
              @click="handleReject(scope)"
            >驳回</el-button>
          </div>
          <div v-else>
            <el-button size="mini" type="text" @click="handleDetail(scope)">查看</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSize"
      @current-change="handleCurrent"
      :current-page="search.currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="search.pageSize"
      background
      layout="total, prev, pager, next, sizes, jumper"
      :total="search.total"
    ></el-pagination>
    <el-dialog width="40%" :visible.sync="testDialog.visible" title="提交测试">
      <div>
        <!--				<span>当前有3个埋点没有实施，请实施完成后，再提交到测试！</span>-->
        <el-row>
          <el-col :span="3">
            <span>说明</span>
          </el-col>
          <el-col :span="21">
            <el-input
              type="textarea"
              v-model="testDialog.form.explain"
              size="mini"
              placeholder="请填写说明"
            ></el-input>
          </el-col>
        </el-row>
      </div>
      <span slot="footer">
        <el-button size="mini" @click="handleCancelTest">取 消</el-button>
        <el-button size="mini" type="primary" @click="handleConfirmTest">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog width="40%" :visible.sync="rejectDialog.visible" title="驳回">
      <el-tag>目前已实施2个埋点，已实施的埋点驳回后将无法修改！</el-tag>
      <el-form
        :model="rejectDialog.form"
        :rules="rejectDialog.rules"
        size="mini"
        ref="rejectForm"
        label-position="left"
        label-width="80px"
      >
        <el-form-item label="驳回到" prop="status">
          <el-select v-model="rejectDialog.form.status" placeholder="请选择">
            <el-option label="设计中" :value="0"></el-option>
            <!--						<el-option label="埋点审核" value="review"></el-option>-->
          </el-select>
        </el-form-item>
        <el-form-item label="说明">
          <el-input type="textarea" v-model="rejectDialog.form.explain"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button size="mini" @click="handleCancelReject">取 消</el-button>
        <el-button size="mini" type="primary" @click="handleConfirmReject('rejectForm')">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog width="50%" :visible.sync="developDialog.visible" title="开发提示">
      <div>
        <p v-for="(item, index) in developDialog.tipData" :key="index">{{ item.desc }}</p>
        <p class="title">1. {{developDialog.appItem.appName}}</p>
        <p>测试地址：{{developDialog.appItem.testAddress || "--"}}</p>
        <p>正式地址：{{developDialog.appItem.officialAddress || "--"}}</p>
      </div>
      <span slot="footer">
        <el-button size="mini" @click="developDialog.visible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="handleDevelopConfirm">去开发</el-button>
      </span>
    </el-dialog>
    <el-dialog width="40%" :visible.sync="onlineDialog.visible" title="提交上线">
      <el-tag>您确定要提交给栏目上线吗？</el-tag>
      <el-form
        :model="onlineDialog.form"
        :rules="onlineDialog.rules"
        size="mini"
        ref="rejectForm"
        label-position="left"
        label-width="80px"
      >
        <el-form-item label="说明">
          <el-input type="textarea" v-model="onlineDialog.form.explain" placeholder="请输入提交说明"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button size="mini" @click="handleCancelOnline">取 消</el-button>
        <el-button size="mini" type="primary" @click="handleConfirmOnline()">确 定</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>

<script>
export default {
  name: "developList",
  data() {
    return {
      sdkType: null, // 需求的属性
      requirementId: null,
      requirementRow: null,
      tableLoading: false,
      columns: [
        {
          prop: "requirementId",
          label: "需求ID",
          width: 80,
          tooltip: true
        },
        {
          prop: "requirementName",
          label: "需求名称",
          width: 180,
          minWidth: 180,
          tooltip: true
        },
        {
          prop: "bizName",
          label: "栏目名称",
          width: 180,
          tooltip: true
        },
        {
          prop: "version",
          label: "系统版本",
          width: 100,
          tooltip: true
        },
        {
          prop: "appName",
          label: "操作系统",
          width: 100,
          tooltip: true
        },
        {
          prop: "status",
          label: "状态",
          width: 100,
          tooltip: true
        },
        {
          prop: "creatorName",
          label: "开发人",
          width: 100,
          tooltip: true
        },
        {
          prop: "createTime",
          label: "创建时间",
          width: 150,
          tooltip: true
        },
        {
          prop: "updateTime",
          label: "更新时间",
          width: 150,
          tooltip: true
        }
      ],
      data: [],
      search: {
        type: "my",
        requirementName: "",
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      testDialog: {
        visible: false,
        form: {
          explain: ""
        }
      },
      rejectDialog: {
        visible: false,
        form: {
          status: "",
          explain: ""
        },
        rules: {
          status: [
            { required: true, message: "请选择要驳回的类型", trigger: "blur" }
          ]
        }
      },
      onlineDialog: {
        visible: false,
        form: {
          explain: ""
        },
        rules: {}
      },
      developDialog: {
        visible: false,
        tipData: [
          {
            desc:
              "请在插入埋点代码之前，先进行采集sdk导入，导入流程请查看文档SDK导入。"
          },
          {
            desc:
              "请判断当前栏目运行于哪个站点下，然后将该站点的测试地址和正式地址设置到SDK的上报地址中。"
          },
          {
            desc: "栏目支持的所有站点的上报地址如下："
          }
        ],
        appItem: {
          appName: "",
          testAddress: "",
          officialAddress: ""
        }
      }
    };
  },
  created() {
    this.handleQueryList();
  },
  methods: {
    // 查询开发需求列表
    async handleQueryList() {
      this.tableLoading = true;
      let { requirementName, currentPage, pageSize } = this.search;
      let data = {
        requirementName,
        status: 2,
        currentPage,
        pageSize
      };
      try {
        let res = await this.$requirementApi.requirementList(data);
        if (res) {
          let { list, total } = res.value;
          this.data = list;
          this.search.total = total;
        }
        this.tableLoading = false;
      } catch (e) {
        this.tableLoading = false;
      }
    },
    handleCurrent(val) {
      this.search.currentPage = val;
      this.handleQueryList();
    },
    handleSize(val) {
      this.search.currentPage = 1;
      this.search.pageSize = val;
      this.handleQueryList();
    },
    // 开发
    handleDevelop(scope) {
      let {
        requirementId,
        appName,
        testAddress,
        officialAddress,
        sdkType
      } = scope.row;
      this.sdkType = sdkType;
      this.requirementId = requirementId;
      this.developDialog.appItem = {
        appName,
        testAddress,
        officialAddress
      };
      this.developDialog.visible = true;
    },
    handleDevelopConfirm() {
      this.$router.push({
        path: `/buryDevelop/edit/${escape(this.requirementId)}/${escape(this.sdkType)}`
      });
    },
    // 提交需求
    async handleRequirementStatus(action) {
      let data = {
        requirementId: this.requirementRow.requirementId,
        nowStage: this.requirementRow.status,
        action
      };
      if (action === "提交") {
        data.targetStage = 3;
        data.desc = this.testDialog.form.explain;
      } else if (action === "驳回") {
        data.targetStage = this.rejectDialog.form.status;
        data.desc = this.rejectDialog.form.explain;
      } else if (action === "上线") {
        data.targetStage = 5;
        data.desc = this.onlineDialog.form.explain;
      }
      let res = await this.$processApi.processAdd(data);
      if (res) {
        this.$message.success(action + "成功");
        this.handleQueryList();
      }
    },
    // 测试
    handleTest(scope) {
      let { requirementId } = scope.row;
      this.requirementRow = scope.row;
      this.requirementId = requirementId;
      this.testDialog.visible = true;
    },
    // 测试：确定
    handleConfirmTest() {
      this.handleRequirementStatus("提交");
      this.testDialog.visible = false;
    },
    // 测试：取消
    handleCancelTest() {
      this.testDialog.form.explain = "";
      this.testDialog.visible = false;
    },
    // 驳回
    handleReject(scope) {
      let { requirementId } = scope.row;
      this.requirementRow = scope.row;
      this.requirementId = requirementId;
      this.rejectDialog.visible = true;
    },
    // 驳回：确定
    handleConfirmReject(rejectForm) {
      this.$refs[rejectForm].validate(valid => {
        if (valid) {
          this.handleRequirementStatus("驳回");
          this.rejectDialog.visible = false;
        } else {
          return false;
        }
      });
    },
    // 驳回：取消
    handleCancelReject() {
      this.$refs["rejectForm"].resetFields();
      this.rejectDialog.visible = false;
    },
    // 上线
    handleOnline(scope) {
      let { requirementId } = scope.row;
      this.requirementRow = scope.row;
      this.requirementId = requirementId;
      this.onlineDialog.visible = true;
    },
    // 上线：确定
    handleConfirmOnline() {
      this.handleRequirementStatus("上线");
      this.onlineDialog.visible = false;
    },
    // 上线：取消
    handleCancelOnline() {
      this.onlineDialog.form.explain = "";
      this.onlineDialog.visible = false;
    },
    handleDetail(scope) {
      this.$router.push({
        path: `/buryDevelop/detail/${escape(scope.row.requirementId)}`
      });
    }
  }
};
</script>

<style scoped lang="scss">
.bury-develop-container {
  .search {
    .name {
      width: 350px;
      margin-left: 5px;
    }
  }

  .status-success {
    color: #f5a753;
  }

  .status-error {
    /*color: #f5a753;*/
  }

  .el-dialog__body {
    .el-tag {
      width: 100%;
      margin: 10px 0;
    }
  }

  .title {
    font-weight: 500;
  }
}
</style>
